[#ftl]
<template>
    <el-card class="box-card" style="width: 50%">
        <template #header>
            <div class="card-header">
                <span>${entity.label}管理</span>
                <el-button class="button" type="text" @click="newForm = true"
                ><i class="el-icon-plus"></i>添加${entity.label}</el-button
                >
            </div>
        </template>

        <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="search.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doFilter">查询</el-button>
            </el-form-item>
        </el-form>
    <el-table
            v-loading="loading"
            :data="datas"
            border
            style="width: 100%"
            size="mini"
            row-key="id"
    >
        [#list entity.fields as field]
            [#if field.name?ends_with("_id")]
            [#elseif field.name?ends_with("DateTime")]
                <el-table-column prop="${field.name}" :formatter="formatDateTime" label="${field.label}"> </el-table-column>
            [#elseif field.name=="createTime"]
                <el-table-column prop="${field.name}" :formatter="formatDateTime" label="${field.label}"> </el-table-column>
            [#elseif field.name=="lastModifiedTime"]
                <el-table-column prop="${field.name}" :formatter="formatDateTime" label="${field.label}"> </el-table-column>
            [#elseif field.name?ends_with("Date")]
                <el-table-column prop="${field.name}" :formatter="formatDate" label="${field.label}"> </el-table-column>
            [#elseif field.name == "createTime"]
                <el-table-column prop="${field.name}" :formatter="formatDateTime" label="${field.label}"> </el-table-column>
            [#elseif field.name == "lastModifiedTime"]
                <el-table-column prop="${field.name}" :formatter="formatDateTime" label="${field.label}"> </el-table-column>
            [#else]
                <el-table-column prop="${field.name}" label="${field.label}"> </el-table-column>
            [/#if]

        [/#list]
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button size="small" type="text" @click="editItem(scope.row)">
                    <i class="el-icon-edit"></i>
                </el-button>
                <el-popconfirm title="确定删除吗？" @confirm="removeItem(scope.row)">
                    <template #reference>
                        <el-button size="small" type="text"><i class="el-icon-delete"></i></el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <div v-if="pageInfo">
        <el-pagination
                layout="prev, pager, next"
                @current-change="moreDatas"
                :total="totalCount"
                :page-size="first"
                v-model:current-page="page"
                style="float: right"
        >
        </el-pagination>
    </div>
    </el-card>
    <el-dialog title="创建${entity.label}" v-model="newForm" destroy-on-close>
        <${entity.entityName}Form ref="form" [#list entity.datas as data]:${data.name}s="${data.list}" [/#list] ></${entity.entityName}Form>
        <template #footer>
      <span class="dialog-footer">
          <el-button type="primary" @click="saveItem">
          保存
        </el-button>
        <el-button @click="newForm = false">取消</el-button>

      </span>
        </template>
    </el-dialog>
    <el-dialog :title="`编辑${entity.label}`" v-model="modifyForm" destroy-on-close>
        <${entity.entityName}Form ref="form" :value="form" [#list entity.datas as data]:${data.name}s="${data.list}" [/#list]></${entity.entityName}Form>
        <template #footer>
      <span class="dialog-footer">
          <el-button type="primary" @click="saveItem">
            保存
        </el-button>
        <el-button @click="modifyForm = false">取消</el-button>

      </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
    import { defineComponent } from "vue";
    import moment from "moment";
    import { ${entity.name} } from "@/pages/${module}/${controller}/service/${entity.name}";
    import ${entity.entityName}Form from "@/pages/${module}/${controller}/views/${entity.entityName}Form.vue";
    export default defineComponent({
        name: "${entity.entityName}Manager",
        setup() {
            const service: ${entity.name} = new ${entity.name}();
            return {
                ...service.search(15, 0, {}),
                service,
                ...service.remove(),
                ...service.save(),
                [#list entity.datas as data]
                ...service.${data.list}(),
                [/#list]
                page: 1,
            };
        },
        methods: {
            formatDate(row: any, column: any) {
                const data = row[column.property];
                if (data) {
                    return moment(data).format("YYYY-MM-DD");
                } else {
                    return "";
                }
            },
            formatDateTime(row: any, column: any) {
                const data = row[column.property];
                if (data) {
                    return moment(data).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return "";
                }
            },
            formatJson(row: any, column: any){
                const data = row[column.property];
                if(data){
                    return JSON.parse(data).name;
                }else{
                    return "";
                }
            },
            moreDatas(page: number) {
                this.loadMore(this.first * (page - 1), this.filter);
            },
            removeItem(item: any) {
                this.removeEntity({ id: [item.id] });
                this.doneRemove(() => {
                    this.loadMore(this.first * (this.page - 1), this.filter);
                });
            },
            doFilter() {
                if (this.search.name) {
                    (this.filter as any).name = {
                        like: this.search.name,
                    };
                } else {
                    delete (this.filter as any).name;
                }
                this.loadMore(this.first * (this.page - 1), this.filter);
            },
            saveItem() {
                const form = this.$refs.form as any;
                form.validateForm((valid: any) => {
                    if (valid) {
                        const formval = {
                            ...form.form,
                        };
                        this.saveEntity({ model: formval });
                        this.doneSave(() => {
                            this.loadMore(this.first * (this.page - 1), this.filter);
                            this.$forceUpdate();
                            this.newForm = false;
                            this.modifyForm = false;
                            this.form = {};
                        });
                    }
                });
            },
            editItem(item: any) {
                this.form = {
                    ...item,
                };
                this.modifyForm = true;
            },
        },
        created() {},
        data() {
            return {
                newForm: false,
                modifyForm: false,
                search: {
                    name: "",
                },
                form: {},
                filter: {},
                showCourses:false
            };
        },
        props: {},
        components: {
            ${entity.entityName}Form
        },
    });
</script>

<style lang="scss" scoped></style>
